<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>南声-文章发布</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="./css/publish.css">
</head>

<body>
    <div id="app">
        <div class="title">
            <h2>写文章</h2>
            <span>分享源于热爱</span>
        </div>
        <div class="articleTitle">
            <input style="font-size: 30px;height: 70px;font-weight: bold;" type="text" class="layui-input"
                placeholder="文章标题" v-model="articleInfo.title">
        </div>
        <div class="category">
            <div>
                <select v-model="articleInfo.cid">
                    <option :key="item.id" v-for="(item,index) in categoryies" :value="item.id">{{item.cname}}</option>
                </select>
            </div>
            <div>
                <button @click="saveArticle(2)" class="layui-btn layui-btn-primary layui-border-blue">草稿箱</button>
                <button @click="saveArticle(1)" class="layui-btn layui-btn-normal">发 布</button>
            </div>
        </div>
        <div class="content">
            <textarea placeholder="文章信息别忘记保存..." v-model="articleInfo.hmContent"></textarea>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/api.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                articleInfo:{
                    title : '',
                    cid :'',
                    hmContent : '',
                    status : -1
                },
                categoryies: [],
                loginer: JSON.parse(window.sessionStorage.getItem('loginer')),
            },
            methods: {
                saveArticle(status){
                    if(this.articleInfo.title.trim() != '' && this.articleInfo.cid != '' && this.articleInfo.hmContent.trim() != ''){
                        this.articleInfo.status = status;
                        postRequest('http://localhost:8080/article/save',this.articleInfo).then(resp => {
                            if(resp.data){
                                alert(resp.data.msg);
                                if(resp.data.code == 200){
                                    window.location.href = './index.html';
                                }
                            }
                        })
                    }
                    else{
                        alert('文章信息不能为空');
                    }
                },
                initCategories(){ // 查询类别信息
                    getRequest('http://localhost:8080/category/list').then(resp => {
                        if(resp.data){
                            this.categoryies = resp.data;
                        }
                    })
                },
                loginerCheck() { // 检查是否有登录信息
                    if (this.loginer == null) {
                        alert('请先登录');
                        window.location.href = './login.html';
                    }
                }
            },
            mounted() {
                this.loginerCheck();
                this.initCategories();
            }
        })
    </script>
</body>

</html>